<script setup>
import {ref} from "vue";
const info = ref('属性绑定');
const url = ref('https://www.baidu.com');
url.value = 'https://www.jd.com';//在JS中使用响应式变量的值,必须.value！！！
</script>

<template>
  <h1>属性绑定练习</h1>
  <input type="text" value="kk">
  <input type="text" value="info">
  <hr>
  <!-- 将input元素的value属性与响应式变量info进行绑定,由info来控制输入框的显示值 -->
  <input type="text" v-bind:value="info">
  <!-- v-bind:value="" 可以简写成 :value="" -->
  <input type="text" :value="info">
  <hr>
  <a href="url">超链接1</a><!-- 此处的url只是一个字符串 -->
  <a :href="url">超链接2</a><!-- 属性绑定,将超链接的跳转路径交给url变量来控制 -->
</template>

<style scoped>

</style>